<template>
	<div
		class="itemcontainer-container"
		ref="container"
		@mousemove="handlemousemove"
		@mouseleave="handlemouseleave"
	>
		<div class="carousel-img" ref="image" :style="imagePosition">
			<ImageLoader :src="bigImg" :placeholder="midImg" @loaded="showText" />
		</div>
		<div class="title" ref="title">{{ banner.title }}</div>
		<div class="desc" ref="desc">{{ banner.description }}</div>
	</div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader";
import { server_url } from "@/urlConfig";
export default {
	props: ["banner"],

	data() {
		return {
			titlewidth: 0,
			descwidth: 0,
			containerSize: null, //容器尺寸
			imageSize: null, //图片尺寸
			mousePosition: {
				mouseX: 0,
				mouseY: 0,
			}, //鼠标位置
		};
	},

	components: {
		ImageLoader,
	},

	computed: {
		midImg() {
			return server_url + this.banner.midImg;
		},
		bigImg() {
			return server_url + this.banner.bigImg;
		},
		imagePosition() {
			//如果当前没有获取到尺寸则返回
			if (!this.containerSize || !this.imageSize) {
				return;
			}
			//获取溢出的宽高
			const extraWidth = this.imageSize.width - this.containerSize.width;
			const extraHeight = this.imageSize.height - this.containerSize.height;
			//计算偏移量
			const moveX =
				(extraWidth / this.containerSize.width) * this.mousePosition.mouseX;
			const moveY =
				(extraHeight / this.containerSize.height) * this.mousePosition.mouseY;
			//返回设置的样式
			return { transform: `translate(${-moveX}px,${-moveY}px)` };
		},
		//中间位置
		center() {
			return {
				mouseX: this.containerSize.width / 2,
				mouseY: this.containerSize.height / 2,
			};
		},
	},

	methods: {
		showText() {
			//标题出现
			this.$refs.title.style.width = 0;
			//强制reflow
			this.$refs.title.clientWidth;
			this.$refs.title.style.transition = "1s";
			this.$refs.title.style.opacity = 1;
			this.$refs.title.style.width = this.titlewidth + "px";

			//描述信息出现
			this.$refs.desc.style.width = 0;
			//强制reflow
			this.$refs.desc.clientWidth;
			this.$refs.desc.style.transition = "2s 1s";
			this.$refs.desc.style.opacity = 1;
			this.$refs.desc.style.width = this.descwidth + "px";
		},
		//获取尺寸
		getSize() {
			this.containerSize = {
				height: this.$refs.container.clientHeight,
				width: this.$refs.container.clientWidth,
			};
			this.imageSize = {
				height: this.$refs.image.clientHeight,
				width: this.$refs.image.clientWidth,
			};
		},
		//获取鼠标位置
		handlemousemove(e) {
			const rect = this.$refs.container.getBoundingClientRect();
			const mouseX = e.clientX - rect.left;
			const mouseY = e.clientY - rect.top;
			this.mousePosition = {
				mouseX,
				mouseY,
			};
		},
		//鼠标移出事件
		handlemouseleave() {
			this.mousePosition = this.center;
		},
	},

	mounted() {
		this.titlewidth = this.$refs.title.clientWidth;
		this.descwidth = this.$refs.desc.clientWidth;
		this.getSize();
		//初始图片偏移量位置，默认为中间
		this.mousePosition = this.center;
		//监听窗口大小改变事件
		window.addEventListener("resize", this.getSize);
	},

	destroyed() {
		window.removeEventListener("resize", this.getSize);
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.itemcontainer-container {
	width: 100%;
	height: 100%;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.carousel-img {
	width: 120%;
	height: 120%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s;
	// z-index: -1;
}
.title,
.desc {
	position: absolute;
	left: 30px;
	text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 0, 0, 0.5),
		0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	overflow: hidden;
	opacity: 0;
}
.title {
	font-size: 2em;
	top: calc(50% - 40px);
}
.desc {
	font-size: 1.2em;
	top: calc(50% + 20px);
	color: lighten(@gray, 20%);
}
</style>
